<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      align-center
      :show-close="false"
      destroy-on-close
      draggable
    >
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>查看项目</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <div class="m-[10px] bg-white pb-[10px]">
        <el-table :data="state.tableData" class="w-full" stripe v-loading="state.loading">
          <el-table-column prop="name" label="项目名称"> </el-table-column>
          <el-table-column prop="chargerName" label="负责人" />
          <el-table-column prop="belongType" label="项目分类" />
          <el-table-column prop="authorizeDate" label="立项日期" />
          <el-table-column prop="unitName" label="所属单位" />
          <el-table-column prop="feeAuthorize" label="批准经费（万元）" />
          <el-table-column prop="checkStatus" label="审核状态" />
        </el-table>
        <div class="mt-[20px] flex justify-end">
          <el-pagination
            v-bind="state.pagination"
            @update:current-page="state.currentChange"
            @update:page-size="state.sizeChange"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import useTable from "@/hooks/useTable";
import { getCategoryProject } from "@/api/project/zx/xmflsz";
const dialogVisible = ref(false);
const categoryId = ref(null);
const state = ref({
  loading: false,
  pagination: null,
  sizeChange: null,
  currentChange: null,
  tableData: [],
  search: null,
});
//查看
const view = (id) => {
  categoryId.value = id;
  dialogVisible.value = true;
  state.value = useTable((pagin) =>
    getCategoryProject({
      pageNum: pagin.pageNum,
      pageSize: pagin.pageSize,
      id: categoryId.value,
    })
  );
};
defineExpose({ view });
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
:deep(.el-dialog__body) {
  padding-bottom: 0px;
}
</style>
